/* Modal personalizado */
#modal1 .modal.fade .modal-dialog {
    position: fixed;  /* Modal se posiciona de forma fija */
    left: 0;  /* Alineado al borde izquierdo */
    top: 0;  /* Inicia en la parte superior */
    max-width: 100%;  /* Asegura que el modal ocupe todo el ancho */
}

@media (min-width: 768px) {
    #modal1 .modal-dialog {
        width: 30%;  
    }
}

@media (min-width: 992px) {
    #modal1 .modal-dialog {
        width: 25%;  
    }
}

@media (min-width: 1120px) {
    #modal1 .modal-dialog {
        width: 20%;  
    }
}

/* Asegúrate de que los bordes redondeados se apliquen correctamente */
#modal1 .modal,
#modal1 .modal-dialog,
#modal1 .modal-content {
    border-radius: 0px !important;
}

#modal1 .modal-backdrop {
    opacity: 0.5; 
    transition: opacity 0.3s linear; 
}

/* Cuando el modal está abierto, la opacidad del backdrop será de 0.9 */
#modal1 .modal.show .modal-backdrop {
    opacity: 0.9;
}

/* Aparece desde la izquierda */
#modal1 .modal.fade .modal-dialog {
    transform: translateX(-100%); 
    transition: transform 0.5s ease; 
}

#modal1 .modal.fade.show .modal-dialog {
    transform: translateX(0); 
}

/* Estilos generales */
#modal1 .lista-categorias {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

#modal1 .lista-categorias li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px; /* Ajusta según necesidad */
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
}

#modal1 .lista-categorias li a {
    text-decoration: none;
    color: white;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#modal1 .modal-body {
    padding: 0 !important;
}

#modal1 .lista-categorias li {
    font-weight: normal; 
}



/* Fondo en escala de grises */
.categoria-detergente { background-color: #2E2E2E; } /* Más oscuro */
.categoria-lavalozas { background-color: #4A4A4A; }
.categoria-limpiavidrios { background-color: #666666; }
.categoria-cloro { background-color: #828282; }
.categoria-limpiapisos { background-color: #9E9E9E; }
.categoria-cera-pintura { background-color: #BABABA; }
.categoria-suavizante { background-color: #D6D6D6; } /* Más claro */



/* Textos en escala de grises invertida */
.categoria-detergente a { color: #D6D6D6 !important; } /* Texto más claro */
.categoria-lavalozas a { color: #BABABA !important; }
.categoria-limpiavidrios a { color: #9E9E9E !important; }
.categoria-cloro a { color: #ffffff !important; }
.categoria-limpiapisos a { color: #666666 !important; }
.categoria-cera-pintura a { color: #4A4A4A !important; }
.categoria-suavizante a { color: #2E2E2E !important; } /* Texto más oscuro */